<template>
	<div class="i_addBanner">
		<h2 class="tit">“{{nick}}”公众号</h2>
		<div class="main">
			<p class="title">banner图编辑</p>
			<Form ref="formValidate" :model="formValidate" :rules="ruleValidate" class="content">
				<Row>
					<Col span="9">
						<!-- banner名称 -->
						<div class="address">
						<div class="left">
							<span class="hongdian">*</span>
							<span>banner名称：</span>
						</div>
						<FormItem prop="bannerName" class="inputbox">
							<Input maxlength="32"
							v-model.trim="formValidate.bannerName"
							placeholder="请输入医院banner图名称"
							/>
						</FormItem>
						</div>
						<div class="address">
							<!-- 排序： -->
							<div class="left">
								<span>排序：</span>
							</div>
							<FormItem class="number">
								<InputNumber
								:max="99999"
								:min="1"
								v-model.trim="formValidate.showindex"
								></InputNumber>
							</FormItem>
						</div>				
					</Col>
					<Col span="6">
						<div class="address">
							<!-- 是否可点击： -->
							<div class="left">
								<span>是否可点击：</span>
							</div>
							<FormItem>
								<iSwitch size="large"  v-model="formValidate.iclick" >
									<span slot="open">开启</span>
									<span slot="close">关闭</span>
								</iSwitch>
							</FormItem>
						</div>						
						<div class="address">
						<!-- 是否显示： -->
							<div class="left">
								<span>是否显示：</span>
							</div>
							<FormItem>
								<iSwitch size="large"  v-model="formValidate.enable" >
									<span slot="open">显示</span>
									<span slot="close">关闭</span>
								</iSwitch>
							</FormItem>
						</div>					
					</Col>
					<Col span="9">
						<div class="address">
							<!-- banner链接： -->
							<div class="left">
								<span>banner链接：</span>
							</div>
							<FormItem class="inputbox">
								<Input maxlength="250"
								v-model.trim="formValidate.bannerUrl"
								placeholder="请输入banner链接"
								/>
							</FormItem>
						</div>					
						<div class="address">
							<!-- banner图片： -->
							<div class="left">
								<span>banner图片：</span>
							</div>
							<FormItem>
								<div class="input">
								<div class="demo-upload-list" v-for="(item,index) in uploadList" :key="index">
									<div v-if="item.status === 'finished'">
										<img :src="item.url" />
										<div class="demo-upload-list-cover">
											<Icon type="ios-eye-outline" @click.native="handleView(item.name)"></Icon>
											<Icon type="ios-trash-outline" @click.native="handleRemove(item)"></Icon>
										</div>
									</div>
									<div v-else>
										<Progress v-if="item.showProgress" :percent="item.percentage" hide-info></Progress>
									</div>
								</div>
								<Upload
									v-show="uploadList.length ==0"
									ref="upload"
									:show-upload-list="false"
									:default-file-list="defaultList"
									:on-success="handleSuccess"
									:format="['jpg','jpeg','png']"
									:max-size="2000"
									:on-format-error="handleFormatError"
									:on-exceeded-size="handleMaxSize"
									:before-upload="handleBeforeUpload"
									multiple
									type="drag"
									:action="uploadUrl"
									:headers="fromData"
									:data="uploadData"
									class="uploadpic"
								>
									<div class="pic">
										<Icon type="ios-camera" size="20"></Icon>
									</div>
								</Upload>
								<Modal title="预览图片" v-model="visible" footer-hide>
									<img :src=" uploadList[0].url " v-if="visible" class="picture"/>
								</Modal>
								</div>
							</FormItem>
						</div>					
						<div class="tishi">
							<small>备注：图片支持.jpg\.png\.jpeg格式，大小不超过2000kb,建议710px*265px</small>
						</div>
					</Col>
					<div class="btnbox">
						<Button type="primary" class="btn" @click="save('formValidate')">
							<Icon type="ios-checkmark icon"/>保存
						</Button>
						<Button @click="back" class="btn">
							<i class = "iconfont icon-butongyi icon" ></i>取消
						</Button>
					</div>
				</Row>
			</Form>
		</div>
	</div>
</template>

<script>
import code from "@/configs/base.js";
import api from "@/api/commonApi";
import aesUtils from "@/plugins/aes-utils.js";
import store from "@/store";
export default {
	data() {
		return {
			nick: '',
			id: "",
			formValidate: {
				bannerName: "",
				bannerUrl: "",
				showindex: "",
				enable: false,
				iclick: false
			},
			ruleValidate: {
				bannerName: [
					{ required: true, message: "请输入公众号banner图名称", trigger: "blur" }
				]
			},
			imgName: "",
			visible: false,
			defaultList: [],
			uploadList: [],
			uploadModal: true,
			uploadData: { json: '{"urlCode":"' + code.urlCode.wxBanner + '"}' },
			activeUploadId: "5c2bf345-b973-4ffd-a52e-87bb9c1d2b72",
			uploadUrl: api.fileAll,
			images: "",
			sourceImages: ""
		};
	},
	created() {
		this.nick = localStorage.getItem("nick");
		let iv = store.state.iv;
		let salt = store.state.salt;
		this.id = aesUtils.decrypt(
			salt,
			iv,
			"wxAppid",
			localStorage.getItem("appid")
		);
		let breadList = [
			{ path: "/index", title: "首页" },
			{
				path: "/index/publicOperation/publicAddress/home",
				title: "公众号运营"
			}
		];
		this.$emit("changeBreadList", breadList);
	},
	mounted() {
		this.uploadList = this.$refs.upload.fileList;
		let route = this.$route.query.id;
		if (route) {
			this.$axios
				.post(api.findWxBannerById, {
					id: route
				})
				.then(res => {
					let ret = res.data.object;
					if (ret) {
						this.formValidate.bannerName = ret.bannerName;
						this.formValidate.bannerUrl = ret.bannerUrl;
						this.formValidate.showindex = ret.showindex;
						this.formValidate.enable = Boolean(ret.enable);
						this.formValidate.iclick = Boolean(ret.iclick);
						//图片
						if (ret.imgUrl) {
							this.sourceImages = ret.imgUrl;
							this.uploadList.push({
								name: "a42bdcc1178e62b4694c830f028db5c0",
								percentage: 100,
								status: "finished",
								uid: 1544263544971,
								url: this.fileBaseUrl + this.pictureFormat(ret.imgUrl)
							});
						}
					}
			})
			.catch(err => {
				console.log(err);
			});
		}
	},
	methods: {
		// 后退
		back() {
			let pageNo = this.$route.query.pageNo;
			// FUNCTIONJS公用 跳转方法
			this.functionJS.queryNavgationTo(this, "/index/publicOperation/publicAddress/banner/list", {
				pageNo
			});
		},
		save(name) {
			this.$refs[name].validate(valid => {
				if (valid) {
					let images = "";
					// 上传
					if (this.images != "") {
						images = this.images;
					} else if (this.sourceImages != "" && this.uploadList.length) {
						images = this.sourceImages;
						// 默认
					} else {
						images = "";
					}
					let params = {
						appid: this.id,
						bannerName: this.formValidate.bannerName.trim(),
						bannerUrl: this.formValidate.bannerUrl,
						showindex: this.formValidate.showindex?this.formValidate.showindex:1,
						id: this.$route.query.id,
						enable: Number(this.formValidate.enable),
						imgUrl: images,
						iclick: Number(this.formValidate.iclick)
					};
					this.$axios.post(api.saveWxappBanner, params).then(res => {
						if (res.data.code) {
							this.$Message.info("修改成功");
							let pageNo = this.$route.query.pageNo;
							setTimeout(() => {
							// FUNCTIONJS公用 跳转方法
							this.functionJS.queryNavgationTo(
								this,
								"/index/publicOperation/publicAddress/banner/list",
								{ pageNo }
							);
							}, 500);
						} else {
							this.$Message.info("修改失败请重试");
						}
					});
				} else {
				this.$Message.error("请完整填写必填项!");
				}
			});
		},
		handleView(name) {
			this.imgName = name;
			this.visible = true;
		},
		handleRemove(file) {
			const fileList = this.$refs.upload.fileList;
			this.$refs.upload.fileList.splice(fileList.indexOf(file), 1);
		},
		handleSuccess(res, file) {
			res = this.uploadFileDecrypt(res);
			file.url = this.fileBaseUrl + res.object[0].fileName;
			this.images = JSON.stringify(res.object[0]);
			file.name = res.object[0].fileName;
		},
		handleFormatError(file) {
		this.$Notice.warning({
			title: "The file format is incorrect",
			desc:
			"File format of " +
			file.name +
			" is incorrect, please select jpg or png."
		});
		},
		handleMaxSize(file) {
		this.$Notice.warning({
			title: "文件过大",
			desc: `文件${file.name}过大，文件最大限制为2000KB`
		});
		},
		handleBeforeUpload() {
		const check = this.uploadList.length < 1;
		if (!check) {
			this.$Message.info("只能上传一张图片");
		}
		return check;
		}
	},
};
</script>

<style scoped lang="less">
.i_addBanner {
	width: calc(100%);
	padding: 10px 0px;
	margin: 0 auto;
	background: #fff;
	.tit {
		margin: 15px 0;
		font-weight: bold;
		text-align: center;
		color: #333
	}
	.main{
		margin: 20px;
		margin-bottom: 20px;
		border: 1px solid #f0f0f0;
		box-shadow: 0 4px 3px #ebedf8;
		border-radius: 5px;
		.content {
			margin-left:60px;
		}
		.title {
			font-size: 18px;
			padding-left: 15px;
			margin-bottom: 20px;
			color: #333;
			height: 40px;
			line-height: 40px;
			background: #ebedf8;         
		}
		.address {
			display: flex;
			flex-direction: row;    
			.left {
				font-size: 14px;
				padding-top: 5px;
				.hongdian {
					margin-left: -10px;
					color: red;
				}
				span:last-child {
					margin-right: 5px;
				}
			}
			Input {
				display: inline-block;
				width: 100%;
				border: 1px solid black;
				line-height: 30px;
				outline: none;
				background: pink;
				text-indent: 5px;
			}
			.inputbox {
				width: 70%;
			}
			.number {
				width: 40%;
			}
		}
		.uploadpic {
			display: inline-block;
			width: 58px;
			.pic{
				width: 58px;
				height: 58px;
				line-height: 58px;
			}
		}
		.tishi {
			margin:-20px 0 20px 0;
			color: #ff9966;
		}
	}
	.btnbox {
		width: 100%;
		text-align: center;
		margin-bottom: 30px;
		.btn {
			margin-right: 15px;
			width: 75px;
			height: 35px;
		}
		.icon {
			font-size: 14px;
			margin-right: 5px;
		}
	}
}
.picture {
	width: 100%;
}
.demo-upload-list {
	display: inline-block;
	width: 60px;
	height: 60px;
	text-align: center;
	line-height: 60px;
	border: 1px solid transparent;
	border-radius: 4px;
	overflow: hidden;
	background: #fff;
	position: relative;
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
	margin-right: 4px;
}
.demo-upload-list img {
	width: 100%;
	height: 100%;
}
.demo-upload-list-cover {
	display: none;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: rgba(0, 0, 0, 0.6);
}
.demo-upload-list:hover .demo-upload-list-cover {
  	display: block;
}
.demo-upload-list-cover i {
	color: #fff;
	font-size: 20px;
	cursor: pointer;
	margin: 0 2px;
}
</style>
